<template>
    <div class="content" id="content" ref="content"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name:"Bar",
    props:{
        dataList:{
            type:Array|Object,
            require:false
        },
        title:{
            type:String,
            require:false,
            default:""
        }
    },
    data(){
        return{
            echartsInstance:null
        }
    },
    watch:{
        dataList:{
            handler(newValue,oldValue){
                const title = this.title;
                if(title === "区域客户统计"){
                    this.areaCustomerDeal(newValue);
                }
                if(title === "个人跟进统计"){
                    this.personCustomerDeal(newValue);
                }
            },
            deep:true,
            //immediate:true
        }
    },
    mounted(){
        this.initEcharts();
        const _this = this;
        window.addEventListener('resize',function(){
            _this.echartsInstance.resize();
        })
    },
    methods:{
        initEcharts(){
            const dom = this.$refs.content;
            this.echartsInstance = echarts.init(dom);
            const option = {
                xAxis: {
                    type: 'category',
                    data: ['北京', '深圳', '广州','其它']
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    orient: 'vertical',
                    bottom:"bottom",
                    data: ['意向客户','成交客户']
                },
                series: [
                    {
                        name:"意向客户",
                        data: [0,0,0,0],
                        type: 'bar',
                        label:{show:true,position:'top'},
                        itemStyle: {
                            color: function(params) {
                                // params.dataIndex 是当前柱子的索引
                                var colorList = ['#409eff','#3862f6'];
                                return colorList[0];
                            }
                        },
                        color:"#409eff"
                    },
                    {
                        name:"成交客户",
                        data: [0,0,0,0],
                        type: 'bar',
                        label:{show:true,position:'top'},
                        itemStyle: {
                            color: function(params) {
                                // params.dataIndex 是当前柱子的索引
                                var colorList = ['#409eff','#3862f6'];
                                return colorList[1];
                            }
                        },
                        color:"#3862f6"
                    }
                ]
            };
            option && this.echartsInstance.setOption(option);
        },
        areaCustomerDeal(parameter){
            const customer = parameter.customer;
            const dealCustomer = parameter.dealCustomer;
            const list = ['北京', '深圳', '广州','其它'];
            const tmp = list.map(v => {
                return {
                    city:v,
                    customer:0,
                    dealCustomer:0
                }
            });
            let other = 0;
            for(let i = 0; i < tmp.length; i ++){
                const cityName = tmp[i].city;
                for(let j = 0; j < customer.length; j ++){
                    const name = customer[j].region;
                    const count = customer[j].count;
                    if(name == '北京市' || name == '深圳市' || name == '广州市'){
                        if(name.includes(cityName)){
                            tmp[i].customer = count;
                        }
                    } else {
                        other = other + count;
                    }
                }
                tmp[3].customer = other;
                let dealOther = 0;
                for(let k = 0; k < dealCustomer.length; k ++){
                    const name = dealCustomer[k].region;
                    const count = dealCustomer[k].count;
                    if(name == '北京市' || name == '深圳市' || name == '广州市'){
                        if(name.includes(cityName)){
                            tmp[i].dealCustomer = count;
                        }
                    } else {
                        dealOther = dealOther + count;
                    }
                }
                tmp[3].dealCustomer = dealOther;
            }
            const option = {
                xAxis: {
                    type: 'category',
                    data: ['北京', '深圳', '广州','其它']
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    orient: 'vertical',
                    bottom:"bottom",
                    data: ['意向客户','成交客户']
                },
                series: [
                    {
                        name:"意向客户",
                        data: tmp.map(v => v.customer),
                        type: 'bar',
                        label:{show:true,position:'top'}
                    },
                    {
                        name:"成交客户",
                        data: tmp.map(v => v.dealCustomer),
                        type: 'bar',
                        label:{show:true,position:'top'}
                    }
                ]
            };
            this.echartsInstance.setOption(option);
        },
        personCustomerDeal(parameter){
            const list = parameter;
            for(let i = 0; i < list.length; i ++){
                for(let j = 0; j < list.length - 1; j ++){
                    const count = list[j].customer + list[j].dealCustomer;
                    const sum = list[j+1].customer + list[j+1].dealCustomer;
                    if(sum > count){
                        let temp = list[j];
                        list[j] = list[j + 1];
                        list[j + 1] = temp;
                    }
                }
            }
            const tmp = list.slice(0,4);
            const option = {
                xAxis: {
                    type: 'category',
                    data: tmp.map(v => v.owner)
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    orient: 'vertical',
                    bottom:"bottom",
                    data: ['意向客户','成交客户']
                },
                series: [
                    {
                        name:"意向客户",
                        data: tmp.map(v => v.customer),
                        type: 'bar',
                        label:{show:true,position:'top'}
                    },
                    {
                        name:"成交客户",
                        data: tmp.map(v => v.dealCustomer),
                        type: 'bar',
                        label:{show:true,position:'top'}
                    }
                ]
            };
            this.echartsInstance.setOption(option);
        }
    }
}
</script>

<style lang='scss' scoped>
.content{
    width: 100%;
    height: 100%;
}
</style>